/**
 * 泛娱区块链 - 关于我们
 * @author: zaric
 * @creation time: 2018-12-17
 */

'use strict';

import React from 'react';
import {ImageBackground, ScrollView, StyleSheet, Text, View} from 'react-native';
import NavigationBar from '../../component/navigation/NavigationBar';
import Images from '../../asset';
import ImageView from '../../component/common/ImageView';

class AboutOur extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: {
                system_Introduction: '',
                wechat_official_account: '',
                advertising_cooperation: '',
                business_email: '',
            },
        };
    }

    componentDidMount() {
        this.requestDataSources();
    }

    requestDataSources = async () => {
        let {dataSource} = this.state;
        let url = ServicesApi.AboutOur;
        let data = {
            search_key: 'system_Introduction,advertising_cooperation,wechat_official_account,business_email',
        };
        let result = await Services.post(url, data);
        if (result.code === StatusCode.SUCCESS_CODE) {
            result.data.forEach((item) => {
                let {conf_code, conf_value, conf_name} = item;
                switch (conf_code) {
                    case 'system_Introduction':
                        dataSource.system_Introduction = conf_value;
                        break;
                    case 'advertising_cooperation':
                        dataSource.advertising_cooperation = conf_value;
                        break;
                    case 'wechat_official_account':
                        dataSource.wechat_official_account = conf_value;
                        break;
                    case 'business_email':
                        dataSource.business_email = conf_value;
                        break;
                    default:
                        break;
                }
            });
            this.setState({dataSource});
        }
    };


    render() {
        const width = SCREEN_WIDTH;
        const height = width * 0.528;
        let {dataSource} = this.state;
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'关于我们'}
                />
                <ScrollView>
                    <ImageBackground
                        source={Images.icon_about_our_bg}
                        style={[styles.topBg, {width, height}]}
                    >
                        <ImageView
                            source={Images.icon_about_our_logo}
                            style={[styles.logo, {width}]}
                            maxImageWidth={width}
                        />
                    </ImageBackground>
                    <Text style={styles.titleHint}>简介</Text>
                    <Text style={styles.content}>{dataSource.system_Introduction}</Text>
                    <View style={styles.bottom}>
                        <View style={styles.infoView}>
                            <Text style={styles.hint}>微信公众号</Text>
                            <Text style={styles.info}>{dataSource.wechat_official_account}</Text>
                        </View>
                        <View style={[styles.infoView, {marginTop: 20, marginBottom: 20,}]}>
                            <Text style={styles.hint}>广告合作</Text>
                            <Text style={styles.info}>{dataSource.advertising_cooperation}</Text>
                        </View>
                        <View style={styles.infoView}>
                            <Text style={styles.hint}>商务邮箱</Text>
                            <Text style={styles.info}>{dataSource.business_email}</Text>
                        </View>
                    </View>
                </ScrollView>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    topBg: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    logo: {
        marginHorizontal: 15,
    },
    titleHint: {
        fontSize: FontSize(14),
        color: '#333',
        marginLeft: 15,
        marginTop: 20,
    },
    content: {
        fontSize: FontSize(16),
        color: '#767676',
        marginLeft: 15,
        marginRight: 15,
        marginTop: 15,
        lineHeight: 20,
    },
    bottom: {
        backgroundColor: '#f4f4f4',
        marginLeft: 15,
        marginRight: 15,
        padding: 15,
        marginTop: 20,
        justifyContent: 'space-around'
    },
    infoView: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    hint: {
        fontSize: FontSize(16),
        color: '#333'
    },
    info: {
        fontSize: FontSize(16),
        color: '#858585'
    }

});

export default AboutOur